<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box1 p {
            word-break: normal;
        }

        #box2 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box2 p {
            word-break: break-all;
        }

        #box3 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box3 p {
            word-break: hyphenate;
        }

        #box4 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box4 p {
            word-break: keep-all;
        }
    </style>
</head>

<body>
    <h2>文本的属性</h2>
    <br>
    <h3>2.换行的处理方法：word-break</h3>
    <br>
    <h4>--->关键字：normal: word-break:normal</h4>
    <p>使用浏览器默认的换行规则。</p>
    <div id="box1">
        <p>
            ab cdefgddddsad hhhhhhhhhhsdsdsdhhhhhhhhh afhafahui
            78749844874984+459
            后面是br标签<br>
            这是一段文字。
        </p>
    </div>
    <br>

    <h4>--->关键字：break-all: word-break:break-all</h4>
    <p>允许在词内换行，遇到边框自动换行</p>
    <div id="box2">
        <p>
            ab cdefgddddsadhhhhhhhhhhsdsdsdhhhhhhhhh afhafahui213132
            7877788779779797979797977889
            后面是br标签<br>
            ab cdefgddddsad hhhhhhhhhhsdsdsdhhhhhhhhh afhafahui
        </p>
    </div>
    <br>

    <h4>--->关键字：hyphenate: word-break:hyphenate</h4>
    <p>不允许在词内换行，不受边框限制，在没遇到空格前不会进行换行</p>
    <div id="box3">
        <p>
            ab cdefgddddsadhhhhhhhhhhsdsdsdhhhhhhhhh afhafahui
            7877788779779797979797977889
            后面是br标签<br>
            ab cdefgddddsad hhhhhhhhhhsdsdsdhhhhhhhhh afhafahui
        </p>
    </div>
    <br>

    <h4>--->关键字：keep-all: word-break:keep-all</h4>
    <p>遇到半角空格或连字符('-')才会换行。
    </p>
    <div id="box4">
        <p>
            ab cdefgddddsad hhhhhhhhh-hsdsdsdhhhhhhhhh afhafahui
            78777887797797979-79797977889
            7877788779779797979797977889
            后面是br标签<br>
            ab cdefgddddsad hhhhhhhhhhsdsdsdhhhhhhhhh afhafahui
        </p>
    </div>

    <h2>    
        <a href="./目录.html">返回目录</a>
    </h2>
</body>

</html>